<admintpl file="header" />
</head>
<body>
	<div class="wrap">
		<ul class="nav nav-tabs">
			<li><a href="{:U('Admin/Live/index')}">直播列表</a></li>
			<li><a href="{:U('Admin/Live/add')}">添加直播</a></li>
			<li class="active"><a>直播详情</a></li>
		</ul>
		<form method="post" class="form-horizontal js-ajax-form" action="{:U('Admin/Live/edit_post')}">
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;">直播名称：</label>
					<div class="span4">
						<input type="text" name="name" value="{$name}" disabled>
					</div>
					
					<label class="span1 control-label" style="width: 90px;"><nobr>权重：</nobr></label>
					<div class="span3">
						<input type="text" name="weight" value="{$weight}" disabled>
					</div>
				</div>
				<div class="control-group">
				    <label class="span1 control-label" style="width: 90px;">开始时间：</label>
					<div class="span4">
						<input type="text" name="start_time" class="js-datetime"  value="{$start_time}" disabled autocomplete="off">
					</div>
					<label class="span1 control-label" style="width: 90px;">封面图片：</label>
					<div class="span4 wrapper">
                          <div id="uploader-image">
                              <div id="fileList" class="uploader-list">
                                  <div id="imageDiv" class="file-item thumbnail" style="width:150px;height: 150px;">
                                      <a href="{$image_url}" target="_blank"><img id="imagePreview" src="{$image_url}" style="width:150px;height: 150px;"></a>
                                  </div>
                              </div>
                          </div>
                    </div>
				</div>
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;">直播线路：</label>
					<div>
					    <div class="angle_tpl_div" style="float:left;">
						    <div class="span4">
							    <label class="span1 control-label" style="width: 50px;text-align:left:padding-right:2px;margin-left: 4px;"><nobr>机位一：</nobr></label>
							    <label class="span1 control-label" style="width: 35px;text-align:left:padding-right:2px;margin-left: 4px;"><nobr>名称</nobr></label>
								<input type="text" id="angle_name1" name="angle_name[]" disabled style="width: 160px;margin-left: 4px;">
							</div>
							<label class="span1 control-label" style="width: 30px;">频道</label>
							<div class="span2">
							    <select style="width: 126px;margin-left: 4px;" disabled id="angle_channel_id1" onchange="angle_channel_change('angle_channel_id1');" name="angle_channel_id[]">
							        <foreach name="channelList" item="vo">
							        	<option value="{$vo.channel_id}" id="angle_channel_id1-{$vo.channel_id}" data-device_type="{$vo.device_type}">{$vo.channel_name}</option>
							        </foreach>
							    </select>
							</div>
							<label class="span1 control-label" style="width: 50px;margin-left: 4px;"><nobr>推流业务员</nobr></label>
							<div class="span3">
							    <input type="hidden" id="angle_operator_id_h_1" value="0" name="angle_operator_id[]"/>
							    <select style="width: 108px;margin-left: 4px;" disabled id="angle_operator_id1" name="angle_operator_id[]">
							        <option></option>
							    </select>
							    <img src="__PUBLIC__/images/tv-expandable.gif" style="cursor:pointer;width:16px;display:none;" id="add_angle_tpl"/>
							</div>
					    </div>
						<div class="angle_tpl_div" style="float:left;margin-left: 110px;margin-top: 5px;">
							<div class="span4">
							    <label class="span1 control-label" style="width: 50px;text-align:left:padding-right:2px;margin-left: 4px;"><nobr>机位二：</nobr></label>
							    <label class="span1 control-label" style="width: 35px;text-align:left:padding-right:2px;margin-left: 4px;"><nobr>名称</nobr></label>
								<input type="text" id="angle_name2" disabled name="angle_name[]" style="width: 160px;margin-left: 4px;">
							</div>
							<label class="span1 control-label" style="width: 30px;">频道</label>
							<div class="span2">
							    <select style="width: 126px;margin-left: 4px;" disabled id="angle_channel_id2" onchange="angle_channel_change('angle_channel_id2');" name="angle_channel_id[]">
							        <foreach name="channelList" item="vo">
							        	<option value="{$vo.channel_id}" id="angle_channel_id2-{$vo.channel_id}" data-device_type="{$vo.device_type}">{$vo.channel_name}</option>
							        </foreach>
							    </select>
							</div>
							<label class="span1 control-label" style="width: 50px;margin-left: 4px;"><nobr>推流业务员</nobr></label>
							<div class="span3">
							    <input type="hidden" id="angle_operator_id_h_1" value="0" name="angle_operator_id[]"/>
							    <select style="width: 108px;margin-left: 4px;" disabled id="angle_operator_id2" name="angle_operator_id[]">
							        <option></option>
							    </select>
							</div>
						</div>
					</div>
				</div>
				
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;"><label>
				      <input type="checkbox" id="type" name="type" value="2" disabled <if condition="$type eq 2">checked</if> style="margin-bottom:4px;"> <span>赛事信息</span>
				       </label></label>
				    <div style="float:left;">
						<div class="span4">
						    <label class="span1 control-label" style="width: 60px;text-align:left:padding-right:2px;margin-left: 4px;"><nobr>红方选手</nobr></label>
							<select style="width: 208px;margin-left: 4px;" disabled name="red_competitor_id">
						        <foreach name="competitorList" item="vo">
						        	<option value="{$vo.competitor_id}">{$vo.real_name}</option>
						        </foreach>
						    </select>
						</div>
						<label class="span1 control-label" style="width: 30px;">URL</label>
						<div class="span3">
						    <input type="text" name="red_news_url" disabled style="width: 200px;margin-left: 4px;" value="{$red_news_url}">
						</div>
					</div>
					<div style="float:left;margin-left: 0px;margin-top: 5px;">
						<div class="span4">
						    <label class="span1 control-label" style="width: 60px;text-align:left:padding-right:2px;margin-left: 4px;"><nobr>蓝方选手</nobr></label>
							<select style="width: 208px;margin-left: 4px;" disabled name="blue_competitor_id">
						        <foreach name="competitorList" item="vo">
						        	<option value="{$vo.competitor_id}">{$vo.real_name}</option>
						        </foreach>
						    </select>
						</div>
						<label class="span1 control-label" style="width: 30px;">URL</label>
						<div class="span3">
						    <input type="text" name="blue_news_url" disabled style="width: 200px;margin-left: 4px;" value="{$blue_news_url}">
						</div>
					</div>
				</div>
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;">
					   <label>
				         <input type="checkbox" id="news_status" disabled name="news_status" <if condition="$news_status eq 1">checked</if> value="1" style="margin-bottom:4px;"> <span>相关新闻</span>
				       </label>
				    </label>
					<div>
					    <div class="news_tpl_div" style="float:left;">
						    <div class="span4">
							    <label class="span1 control-label" style="width: 50px;text-align:left:padding-right:2px;margin-left: 4px;"><nobr>URL</nobr></label>
								<input type="text" id="news_url1" disabled name="news_url[]" style="width: 200px;margin-left: 4px;">
							</div>
							<label class="span1 control-label" style="width: 30px;">权重</label>
							<div class="span3">
							    <input type="text" id="news_weight1" disabled name="news_weight[]" value="70" style="width: 178px;margin-left: 4px;">
							    <img src="__PUBLIC__/images/tv-expandable.gif" style="cursor:pointer;width:16px;display:none;" id="add_news_tpl"/>
							</div>
					    </div>
						<div class="news_tpl_div" style="float:left;margin-left: 0px;margin-top: 5px;">
							<div class="span4">
							    <label class="span1 control-label" style="width: 50px;text-align:left:padding-right:2px;margin-left: 4px;"><nobr>URL</nobr></label>
								<input type="text" id="news_url2" disabled name="news_url[]" style="width: 200px;margin-left: 4px;">
							</div>
							<label class="span1 control-label" style="width: 30px;">权重</label>
							<div class="span2">
							    <input type="text" id="news_weight2" disabled name="news_weight[]" value="70" style="width: 178px;margin-left: 4px;">
							</div>
						</div>
					</div>
				</div>
				
				<div class="control-group">
				    <label class="span1 control-label" style="width: 90px;">未开始视频</label>
					<label class="span1 control-label" style="width: 80px;">是否VR</label>
		            <div class="span2">
		                <select class="select_2" name="is_vr1" id="is_vr1" style="width: 174px;" disabled>
		                    <option value="2" <if condition="$befor_start_info.category eq 2"> selected </if> >是</option>
		                    <option value="1" <if condition="$befor_start_info.category eq 1"> selected </if> >否</option>
		                </select>
		            </div>
		            <label class="span1 control-label" style="width: 80px;margin-left:34px;">选择视频</label>
		            <div class="span3">
		                <input type="text" name="video1" value="{$befor_start_info.video_url}" title="{$befor_start_info.video_url}" disabled/>
		            </div>
				</div>
				
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;">回放视频</label>
					<label class="span1 control-label" style="width: 80px;">是否VR</label>
		            <div class="span2">
		                <select class="select_2" name="is_vr2" id="is_vr2" style="width: 174px;" disabled>
		                    <option value="2" <if condition="$rever_info.category eq 2"> selected </if> >是</option>
		                    <option value="1" <if condition="$rever_info.category eq 1"> selected </if> >否</option>
		                </select>
		            </div>
		            
		            <label class="span1 control-label" style="width: 80px;margin-left:34px;">选择视频</label>
		            <div class="span3">
		                <input type="text" name="video2" value="{$rever_info.video_url}" title="{$rever_info.video_url}" disabled/>
		            </div>
				</div>
				
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;"><label>
				      <input type="checkbox" id="introduction_status" disabled name="introduction_status" <if condition="$introduction_status eq 1">checked</if> value="1" style="margin-bottom:4px;"> <span>直播介绍</span>
				       </label></label>
				    <div>
					    <div style="float:left;">
						    <div class="span9">
							    <label class="span1 control-label" style="width: 50px;text-align:left:padding-right:2px;margin-left: 4px;"><nobr>标题</nobr></label>
								<input type="text" name="title" disabled style="width: 248px;margin-left: 4px;" value="{$title}">
							</div>
					    </div>
						<div style="float:left;margin-left: 0px;margin-top: 5px;">
							<div class="span9">
							    <label class="span1 control-label" style="width: 50px;text-align:left:padding-right:2px;margin-left: 4px;"><nobr>详情</nobr></label>
								<textarea style="width: 498px; height: 70px;margin-left:4px;" disabled name="introduction">{$introduction}</textarea>
							</div>
						</div>
					</div>
				</div>
				<div class="control-group">
					<label class="span2 control-label" style="width: 90px;">直播备忘：</label>
					<div class="span7">
						<textarea style="width: 556px; height: 70px;" disabled name="remark">{$remark}</textarea>
					</div>
				</div>
		</form>
	</div>
	<script src="__PUBLIC__/js/common.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/content_addtop.js"></script>
	<script type="text/javascript" >
		function html5Reader(file, previewId){
	        var file = file.files[0];
	        var reader = new FileReader();
	        reader.readAsDataURL(file);
	        reader.onload = function(e){
	            $('#'+previewId).attr('src', this.result);
	        }
	    }
	    function image_change(fileId, previewId) {
	        var pic = document.getElementById(previewId),
	                file = document.getElementById(fileId);
	
	        var ext = file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
	
	        // gif在IE浏览器暂时无法显示
	        if(ext != 'png' && ext != 'jpg' && ext != 'jpeg'){
	            alert("图片的格式必须为png或者jpg或者jpeg格式！");
	            return;
	        }
	        var isIE = navigator.userAgent.match(/MSIE/)!= null,
	                isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;
	
	        if(isIE) {
	            file.select();
	            var realLocalPath = document.selection.createRange().text;
	
	            // IE6浏览器设置img的src为本地路径可以直接显示图片
	            if (isIE6) {
	                pic.src = realLocalPath;
	            }else {
	                // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
	                pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + realLocalPath + "\")";
	                // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
	                pic.src = '';
	            }
	        }else {
	            html5Reader(file, previewId);
	        }
	    }

		$("#picker").click(function(){
            $("#imageFile").click();
        });
		
		$("#imageFile").change(function(){
			image_change('imageFile', 'imagePreview');
        });
		
		$("#add_angle_tpl").click(function(){
			$("#angle_tpl_div").after($("#angle_tpl_div").html());
			var obj = $("div[class=angle_tpl_div]:last");
			var h = '<div class="angle_tpl_div" style="float:left;margin-left: 110px;margin-top: 5px;">' + obj.html() + '</div>';
			var l = $("div[class=angle_tpl_div]").length;
			if(l >= 5){
				alert('最多只能添加5个机位！');
				return;
			}else if(l == 4) {
				h = h.replace('机位四', '机位五');
			}else if(l == 3) {
				h = h.replace('机位三', '机位四');
			}else if(l == 2) {
				h = h.replace('机位二', '机位三');
			}
			h = h.replace('angle_name' + l, 'angle_name' + (l + 1));
			h = h.replace(new RegExp("angle_channel_id" + l ,"gm"), 'angle_channel_id' + (l + 1));
			h = h.replace('angle_operator_id' + l, 'angle_operator_id' + (l + 1));
			obj.after(h);
			$('#angle_channel_id' + (l + 1)).change();
			
		});
		$("#add_news_tpl").click(function(){
			var obj = $("div[class=news_tpl_div]:last");
			var h = '<div class="news_tpl_div" style="float:left;margin-left: 110px;margin-top: 5px;">' + obj.html() + '</div>';
			var l = $("div[class=news_tpl_div]").length;
			//替换id
			h = h.replace('news_url' + l, 'news_url' + (l + 1));
			h = h.replace('news_weight' + l, 'news_weight' + (l + 1));
			obj.after(h);
		});
		
		function angle_channel_change(id){
			var index = id.replace('angle_channel_id', '');
			var channel_id = $('#' + id).val();
			var device_type = $('#' + id + '-' + channel_id).attr('data-device_type');
			if(3 == device_type){
				$('#angle_operator_id_h_' + index).attr('disabled', true);
				$('#angle_operator_id' + index).attr('disabled', true);
				$.get("{:U('Admin/Live/get_channel_operators')}&channel_id=" + channel_id, function(r){
					if(r.data){
						var html = '';
						for(var item in r.data){
							html += '<option value="' + r.data[item].operator_id +'">' + r.data[item].real_name +'</option>'
						}
						$('#angle_operator_id' + index).html(html);
					}
				});
			}else{
				$('#angle_operator_id' + index).attr('disabled', true);
				$('#angle_operator_id_h_' + index).attr('disabled', false);
				$('#angle_operator_id' + index).html('<option value="0" selected></option>');
			}
		}
		
		$('select[name="red_competitor_id"]').val({$red_competitor_id});
		$('select[name="blue_competitor_id"]').val({$blue_competitor_id});
		
		var angleList = {$angleList};
		if(angleList.length > 2){
			for(var i = 0;i<angleList.length - 2;i++){
				$("#add_angle_tpl").click();
			}
		}
		var newsList = {$newsList};
		if(newsList.length > 2){
			for(var i = 0;i<newsList.length - 2;i++){
				$("#add_news_tpl").click();
			}
		}
		var i = 1;
		for(var o in angleList){
			$('#angle_name'+i).val(angleList[o].name);
			$('#angle_channel_id'+i).val(angleList[o].source_id);
			$('#angle_operator_id'+i).val(angleList[o].operator_id);
			i++;
		}
		i = 1;
		for(var o in newsList){
			$('#news_url'+i).val('id='+newsList[o].news_id+'&type='+newsList[o].type);
			$('#news_weight'+i).val(newsList[o].weight);
			i++;
		}
		i = 1;
		for(var o in angleList){
			angle_channel_change('angle_channel_id'+i);
			i++;
		}
	</script>
</body>
</html>